<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <title>Along</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script include="echarts" src="./static/libs/include-leaflet-local.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id='map'></div>
    <script>
        var map = L.map('map').setView([30.92, 116.35], 4);

        initMap();

        updateView();

        function initMap() {
            L.tileLayer('https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}', {
                    attribution: '<a href="#">MapGIS</a>',
                    maxZoom: 18,
                    id: 'mapbox.dark'
                }).addTo(map);
        }

        function updateView() {
            $.get('../../static/data/echartsgl/lines/lines.json', function (data) {
                function getAirportCoord(idx) {
                    return [data.airports[idx][3], data.airports[idx][4]];
                }
                var routes = data.routes.map(function (airline) {
                    return [
                        getAirportCoord(airline[1]),
                        getAirportCoord(airline[2])
                    ];
                });

                var option = {
                    title: {
                        text: '世界航线',
                        left: 'center',
                        textStyle: {
                            color: '#eee'
                        }
                    },

                    tooltip: {
                        formatter: function (param) {
                            var route = data.routes[param.dataIndex];
                            return data.airports[route[1]][1] + ' > ' + data.airports[route[
                                2]][1];
                        }
                    },
                    leaflet: {
                        roam: true
                    },
                    series: [{
                        type: 'lines',
                        coordinateSystem: 'leaflet',
                        data: routes,
                        large: true,
                        largeThreshold: 100,
                        lineStyle: {
                            normal: {
                                opacity: 0.05,
                                width: 0.5,
                                curveness: 0.3
                            }
                        },
                        // 设置混合模式为叠加
                        blendMode: 'lighter'
                    }]
                }

                layer = L.zondy.EchartsLayer(map, option).addTo(map);

            });
        }
    </script>

</body>

</html>